<template>
  <div class="setUp">
    <van-nav-bar title="设置" left-text="返回" left-arrow @click-left="back" />
    <div class="set-list">
      <div class="personal-data">
        <van-cell title="个人资料" is-link  to="personal"/>
      </div>
      <div class="set-password">
        <van-cell title="修改密码" is-link @click="showModify" />
        <van-popup
          v-model="isModify"
          closeable
          position="bottom"
          :style="{ height: '40%' }"
          round
        >
          <div class="popup-title">
            <span>修改密码</span>
          </div>
          <van-field
            v-model="oldPassword"
            :type="openEyes ? 'text' : 'password'"
            label="旧密码"
            placeholder="请输入密码"
            :right-icon="openEyes ? 'eye-o' : 'closed-eye'"
            @click-right-icon="isOpen"
          />
          <van-field
            v-model="newPassword"
            :type="openEyes ? 'text' : 'password'"
            label="新密码"
            placeholder="请输入密码"
            :right-icon="openEyes ? 'eye-o' : 'closed-eye'"
            @click-right-icon="isOpen"
          />
          <div class="popup-modify">
            <van-button
              block
              type="default"
              color="#21b276"
              round
              @click="modify"
              >提交</van-button
            >
          </div>
        </van-popup>
      </div>
      <div class="remove-usertext">
        <van-cell title="注销账户" is-link @click="isRemoveUser" />
      </div>
    </div>
    <div class="logOut">
      <van-button
              block
              type="default"
              color="#21b276"
              round
              @click="logOut"
              >退出登录</van-button
            >
    </div>
  </div>
</template>

<script>
import "../assets/less/setUp.less";
import { utils } from "../assets/js/utils";
import { Dialog } from "vant";
export default {
  name: "SetUp",
  data() {
    return {
      newPassword: "",
      oldPassword: "",
      openEyes: false,
      isModify: false,
    };
  },
  created() {},
  methods: {
    back() {
      this.$router.go(-1);
    },
    isOpen() {
      this.openEyes = !this.openEyes;
    },
    showModify() {
      this.isModify = !this.isModify;
    },
    isRemoveUser() {
      Dialog.confirm({
        title: "注销账号",
        message: "是否确定注销,一旦注销无法恢复!",
      })
        .then(() => {
          let tokenString = this.$cookies.get("tokenString");

          if (!tokenString) {
            console.log("浏览器token不存在");
            return this.$router.push({ name: "Login" });
          }

          this.$toast.loading({
            message: "加载中...",
            forbidClick: true,
            duration: 0,
          });
          this.axios({
            method: "POST",
            url: this.baseUrl + "/destroyAccount",
            data: {
              appkey: this.appkey,
              tokenString,
            },
          })
            .then((res) => {
              // console.log("res ==> ", res);
              this.$toast.clear();
              if (res.data.code == "G001") {
                this.$toast({
                  message: res.data.msg,
                  forbidClick: true,
                  duration: 3000,
                });
                return this.$router.push({ name: "Login" });
              } else {
                this.$toast({
                  message: res.data.msg,
                  forbidClick: true,
                  duration: 3000,
                });
              }
            })
            .catch((err) => {
              this.$toast.clear();
              console.log(err);
            });
        })
        .catch((res) => {
          console.log("res 取消==> ", res);
        });
    },
    modify() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      let o = {
        password: {
          value: this.newPassword,
          reg: /^[A-Za-z]\w{5,15}$/,
          errorMsg: "密码由6到16位首字符组成,且首字符为字母",
        },
      };
      if (!utils.validForm(o)) {
        return;
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseUrl + "/updatePassword",
        data: {
          appkey: this.appkey,
          password: this.newPassword,
          oldPassword: this.oldPassword,
          tokenString,
        },
      })
        .then((res) => {
          // console.log("res ==> ", res);
          this.$toast.clear();
          if (res.data.code == "E001") {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },
    logOut(){
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "POST",
        url: this.baseUrl + "/logout",
        data: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          // console.log("res ==> ", res);
          this.$toast.clear();
          if (res.data.code == "F001") {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },
  },
};
</script>